<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="#">WMS</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Task</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Load Task</a>
        </li>
    </ul>
</div>
<div class="portlet light bordered" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold">General Load Task: {{task.id}}</span>
        </div>
    </div>
    <div class="portlet-body form form-horizontal">
        <form name="taskInfoForm_{{task.taskId}}" novalidate class="form-horizontal">
            <div class="row form-group">
                <div class="col-md-4">
                    <label class="col-md-4 control-label">Entry ID</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" name="entryId" ng-disabled="true"
                               ng-model="task.entryId">
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="col-md-4 control-label">Task Status</label>
                    <div class="col-md-8">
                        <task-status-auto-complete ng-model="task.status" is-disabled="true"></task-status-auto-complete>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="col-md-4 control-label">Assignee</label>
                    <div class="col-md-8">
                        <user-auto-complete name="assignee" ng-model="task.assigneeUserId" allow-clear="true"></user-auto-complete>
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-4">
                    <label class="col-md-4 control-label">Dock</label>
                    <div class="col-md-8">
                         <dock-auto-complete ng-model="task.dockId" ng-disabled="isEnable" on-select="selectDock(dock, task)"></dock-auto-complete>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="col-md-4 control-label">Priority</label>
                    <div class="col-md-8">
                        <task-priority-auto-complete name="priority" ng-model="task.priority" allow-clear="true"></task-priority-auto-complete>
                    </div>
                </div>
                <div class="col-md-4">
                    <label  class="col-md-4 control-label">Apply Assignee To All Task Steps </label>
                    <div class="col-md-8">
                        <md-switch class="md-primary" style="margin: 0px"  aria-label="Apply Assignee To All Task Steps"
                                   ng-model="task.isUpdateStepAssignee"></md-switch>
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-4">
                    <label class="col-md-4 control-label">SealNo</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" name="SealNo"
                               ng-model="task.seal.sealNo">
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div>
                    <span style="display: inline-block"><h4><b>Load List</b></h4></span>
                    <button class="btn blue" style="float: right;"
                            disabled="true"
                            ng-click="addLoad(task)">Add Load</button>
                </div>
                <div class="table-scrollable">
                    <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" role="grid">
                        <thead>
                        <tr role="row">
                            <th>Load ID</th>
                            <th>Load NO</th>
                            <th>Status</th>
                            <th>Load Type</th>
                            <th>Appointment Time</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="load in task.loads track by $index" style="cursor: pointer;"
                            ng-click="selectLoad(task, load)">
                            <td>{{load.id}}</td>
                            <td>{{load.loadNo}}</td>
                            <td>{{load.status}}</td>
                            <td>{{load.type}}</td>
                            <td>{{load.appointmentTime}}</td>
                            <td>
                                <a ng-click="removeLoad(task, load.id)"  ng-show="task.status == 'New'">Remove</a>
                            </td>
                        </tr>
                        <tr ng-if="task.loads && task.loads.length == 0">
                            <td colspan="5" style="text-align: center;"> There is no load for this Task.</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-12" ng-if="task.selectedLoad">
                <div style="text-align: center">
                    <h4>Orders of {{task.selectedLoad.loadNo}}</h4>
                </div>
                <table class="table table-striped table-bordered table-advance table-hover" role="grid">
                    <thead>
                    <tr class="uppercase">
                        <th>Order No.</th>
                        <th>Purchase Order No.</th>
                        <th>Freight Term</th>
                        <th>Delivery Request Date</th>
                        <th>Status</th>
                        <th>Staging Area</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="order in task.orderList">
                        <td>{{order.id}}</td>
                        <td>{{order.poNos}}</td>
                        <td>{{order.freightTerm}}</td>
                        <td>{{order.mabd}}</td>
                        <td>{{order.status}}</td>
                        <td>{{order.stagingArea}}</td>
                    </tr>
                    <tr ng-if="task.orderList && task.orderList.length > 0">
                        <td colspan="6" style="text-align: center;"> There is no order for this Load.</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="form-actions">
                <div class="col-md-12" style="text-align: right">
                    <waitting-btn type="submit" btn-class="btn blue" ng-click="submit(task)"
                                  value="submitLabel" is-loading="loading"></waitting-btn>
                    <button class="btn default" ng-click="cancel()">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>